(function(){
    $.ajax({
      type:"get",
      url:"http://127.0.0.1:5500/dataJS/bar.json",
      success:function(data){
        var keys = [];
          var values = [];
          for (var i = 0; i < data.length; i++) {
              keys.push(data[i].MTimeS);
              values.push(data[i].Avgh);
          }
      var mychart=echarts.init(document.querySelector('#c4'));
      var option = {
        grid:{
          left: 30,
          top: 10,
          right: 10,
          bottom: 30
        },
          xAxis: {
            type: 'category',
            data: keys
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示
              lineStyle: {
                color: 'rgba(255,255,255,.1)',//分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
                width: 1,//分隔线线宽
                type: 'solid',//分隔线的类型可选：'solid', 'dashed','dotted'
              }
            }
          },
          series: [
            {
              data: values,
              type: 'bar',
              label:{
                show: true,
                position: 'top',
                color: '#fff',
                fontStyle: 'normal',//字体风格,可选：'normal','italic''oblique'
                fontWeight: 'normal',//文字字体的粗细,可选：'normal','bold','bolder','lighter'或用数字100 | 200 | 300 | 400...
                fontFamily:'sans-serif',//文字的字体系列。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                fontSize: 12,//文字的字体大小
              },
              barWidth: 30,
              itemStyle: {
                //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
                color: new echarts.graphic.LinearGradient(0,0,0,1,[
                  {
                    offset: 0,
                    color: '#5052EE'//百分之0状态之下的颜色值
                  },
                  {
                    offset: 1,
                    color: '#AB6EE5'//百分之100状态之下的颜色值
                  }
                ]),
                borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
              }
            }
          ]
        };
      mychart.setOption(option);
      window.addEventListener('resize', function () {
        mychart.resize();
    })
      }
  });
      
  })();